#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QPushButton>
#include <QDebug>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    this->move(140, 10);

    //this->normalQssTest();
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::normalQssTest()
{
//    只针对这一个按钮通过 setStyleSheet 方法设置的样式.
//    此时这个样式仅针对该按钮生效. 如果创建其他按钮, 其他按钮不会收到影响
    //ui->pushButton->setStyleSheet("QPushButton {color: red; }");

    //给指定控件设置样式之后, 该控件的子元素也会受到影响
    //ui->centralwidget->setStyleSheet("QPushButton {color: red; }");

    //可以看到第一个按钮,同时具备了颜色和字体大小样式.其他的按钮只有颜色样式
    //说明针对第一个按钮，两种设置方式设置的样式，叠加起来了
    //ui->pushButton->setStyleSheet("QPushButton {font-size:20px }");

    //可以看到第一个按钮已经变成绿色了,其他的按钮依然是红色的
    //所以在QSS中也存在优先级规则.通常来说都是“局部”优先级高于“全局”优先级相当于全局样式先"奠定基调”，再通过指定控件样式来"特事特办”
    ui->pushButton->setStyleSheet("QPushButton {color: green; }");
}

void MainWindow::qssSelectorTest(QApplication &a)
{
    //先通过 QPushButton 设置所有的按钮为黄色.
    //再通过 #pushButton 和 #pushButton_2 分别设置这两个按钮为红色和绿色
    //当某个控件身上, 通过类型选择器和 ID 选择器设置了冲突的样式时, ID 选择器样式优先级更高.
    //同理, 如果是其他的多种选择器作用同一个控件时出现冲突的样式, 也会涉及到优先级问题
    //实践中我们可以简单的认为, 选择器描述的范围越精准, 则优先级越高. 一般来说, ID 选择器优先级是最高的
    //QString style = "";
    //style += "QPushButton {color: yellow; }";
    //style += "#pushButton {color: red; }";
    //style += "#pushButton_2 {color: blue; }";
    //a.setStyleSheet(style);

    //可以看到这三种控件的文字颜色都设置为了红色
    //并集选择器是一种很好的代码复用的方式. 很多时候我们希望界面上的多个元素风格是统一的, 就可以使用并集选择器, 把样式属性同时指定给多种控件.
    //a.setStyleSheet("QPushButton, QLabel, QLineEdit {color: red; }");

    //有些控件内部包含了多个 "子控件" . 比如 QComboBox 的下拉后的面板, 比如 QSpinBox 的上下按钮等.
    //可以通过子控件选择器 :: , 针对上述子控件进行样式设置
    //哪些控件拥有哪些子控件, 参考文档 Qt Style Sheets Reference 中 List of Sub-Controls 章节.
    //QString style = "QComboBox::down-arrow {image: url(:/image/down.png)}";
    //a.setStyleSheet(style);

    //伪类选择器, 是根据控件所处的某个状态被选择的. 例如按钮被按下, 输入框获取到焦点, 鼠标移动到某个控件上等.
    //• 当状态具备时, 控件被选中, 样式生效.
    //• 当状态不具备时, 控件不被选中, 样式失效.
    //使用 : 的方式定义伪类选择器
    //:hover 鼠标放到控件上
    //:pressed 鼠标左键按下时
    //:focus 获取输入焦点时
    //:enabled 元素处于可用状态时
    //:checked 被勾选时
    //:read-only 元素为只读状态时
    //这些状态可以使用 ! 来取反. 比如 :!hover 就是鼠标离开控件时, :!pressed 就是鼠标松开时
    //运行程序, 可以看到, 默认情况下按钮文字是红色, 鼠标移动上去是绿色, 鼠标按下按钮是蓝色
    QString style = "";
    style += "QPushButton {color: red;}";
    style += "QPushButton:hover {color: green;}";
    style += "QPushButton:pressed {color: blue;}";
    a.setStyleSheet(style);
    //上述代码也可以使用事件的方式来实现.
    //很明显, 实现同样的功能, 伪类选择器要比事件的方式简单很多.
    //但是不能就说事件机制就不好. 事件可以完成的功能很多, 不仅仅是样式的改变, 还可以包含其他业务逻辑. 这一点是伪类选择器无法替代的
}

void MainWindow::qssBoxModelTest(QApplication &a)
{
    //一个遵守盒模型的控件, 由上述几个部分构成.
    //• Content 矩形区域: 存放控件内容. 比如包含的文本/图标等.
    //• Border 矩形区域: 控件的边框.
    //• Padding 矩形区域: 内边距. 边框和内容之间的距离.
    //• Margin 矩形区域: 外边距. 边框到控件 geometry 返回的矩形边界的距离
    //默认情况下, 外边距, 内边距, 边框宽度都是 0.

    //border: 5px solid red 相当于 border-style: solid; border-width: 5px;
    //border-color: red; 三个属性的简写形式.
    //padding-left: 10px; 是给左侧设置内边距.
    //a.setStyleSheet("QLabel {border: 5px solid blue; padding-left: 20px; }");

    //设置外边距,为了方便确定控件位置, 演示外边距效果, 使用代码创建一个按钮.
    QPushButton* button = new QPushButton(ui->centralwidget);
    button->setGeometry(0, 0, 200, 200);
    button->setText("hello");
    button->setStyleSheet("QPushButton {border: 5px solid red; margin: 20px; }");

    //运行程序, 可以看到, 当前按钮的边框被外边距挤的缩小了. 但是获取到的按钮的 Geometry 是不变的.
    const QRect rect = button->geometry();
    qDebug() << rect;
}

void MainWindow::buttonQssTest(QApplication &a)
{
    ui->pushButton->setStyleSheet(R"(QPushButton {
                                  font-size: 15px;
                                  border: 3px solid #8f8f91;
                                  border-radius: 15px;
                                  background-color: #dadbde})");
    ui->pushButton->setStyleSheet("QPushButton:pressed {background-color: #f6f7fa; }");
}

void MainWindow::checkBoxQssTest(QApplication &a)
{
    QString style = "";
    style += "QCheckBox {font-size: 10px; }";
    style += "QCheckBox::indicator:unchecked {image: url(:/image/checkbox-unchecked.jpg); }";
    style += "QCheckBox::indicator:unchecked:hover {image: url(:/image/checkbox-unchecked_hover.jpg); }";
    style += "QCheckBox::indicator:unchecked:pressed {image: url(:/image/checkbox-unchecked_pressed.jpg); }";
    style += "QCheckBox::indicator:checked {image: url(:/image/checkbox-checked.jpg); }";
    style += "QCheckBox::indicator:checked:hover {image: url(:/image/checkbox-checked_hover.jpg); }";
    style += "QCheckBox::indicator:checked:pressed {image: url(:/image/checkbox-checked_pressed.jpg); }";
    a.setStyleSheet(style);
}

